<style lang='scss' scoped>
@import "@/assets/css/variable";
.VIP {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: $main-bgc;
  min-height: 100%;
  font-size: 1.2rem;
  overflow: auto;
  box-sizing: border-box;
  .top-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: white;
    .info{
      display: flex;
      align-items: center;
      .name{
        font-size: 1.6rem;
        margin-left: 1rem;
        font-weight: bold;
      }
    }
    .vip{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
    }
  }
  .center-box{
    background-color: white;
    position: relative;
    .tip{
      position: absolute;
      left: 0;
      top: -0.4rem;
      padding: 0.1rem 0.3rem;
    }
    .content{
      padding-top: 0.8rem;
      line-height: 1.3em;
      font-size: 1.4rem;
      text-align: justify;
    }
  }
  .bottom-box{
    background-color: white;
    .vip-box{
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      flex-wrap: wrap;
      .box{
        border: 1px solid red;
        padding: 1.6rem 0.8rem;
        border-radius: 0.4rem;
        margin-top: 1rem;
        .line{
          text-align: center;
        }
        .b-r{
          border-radius: 0.3rem;
        }
        .priceday{
          padding: 0.3rem 0.4rem;
        }
      }
    }
  }
}
</style>
<template>
  <div class="VIP padding-all-m">
    <div class="top-box padding-all-l border-r-l">
      <div class="info">
        <van-image
          round
          width="4rem"
          height="4rem"
          :src="userInfo.door_header"
        />
        <span class="name">{{userInfo.name}}</span>
        <!-- <span class="vip" v-if="userInfo.vip_status==1">VIP</span> -->
      </div>
    </div>
    <div class="center-box padding-all-l margT-l border-r-l" v-if="showNew">
        <span class="tip" :style="{backgroundColor:$store.getters.getMasterColor,color:'white'}">新商户限时特权</span>
        <div class="content">新人限时7天免费试用客流系统， {{chaTime}}后将失去免费特权</div>
        <!-- ，7天内购买加送6个月（共18个月）, {{chaTime}}后，将失去加送6个月的机会 -->
    </div>
    <div class="bottom-box padding-all-l margT-l border-r-l">
      <div class="title-m">客流裂变系统</div>
      <div class="vip-box margT-l">
        <div class="box" v-for="(item,index) in tcList" :key="item.id" @click="clickBox(index)">
          <!-- <div class="line">新人限时加6个月</div> -->
          <div class="line title-m" :style="{color:activeBox==index?$store.getters.getMasterColor:''}">{{item.buy}}个月</div>
          <div class="line margT-l" v-if="item.gift>0" :style="{color:activeBox==index?$store.getters.getMasterColor:'#999'}">赠送{{item.gift}}个月</div>
          <div class="line title-m margT-l" :style="{color:activeBox==index?$store.getters.getMasterColor:''}">￥{{item.price}}</div>
          <div class="line b-r margT-l priceday" :style="{backgroundColor:activeBox==index?$store.getters.getMasterColor:'',color:activeBox==index?'white':''}">{{(Number(item.price)/((item.buy+item.gift)*30)).toFixed(3)}}元/每天</div>
        </div>
      </div>
      <div style="margin-top:2rem">
        <van-button :color="$store.getters.getMasterColor" block @click="clickBuyBtn">￥{{tcList[activeBox].price}}立刻购买</van-button>
      </div>
      <div class="margT-l color-red"  v-if="userInfo.vip_status==2">您的VIP到期时间为：{{userInfo.vip_time}}</div>
    </div>
  </div>
</template>

<script>
import { Button, Icon,Image as VanImage, Toast } from "vant";
export default {
  name:'VIP',
  components: {
    [Icon.name]: Icon,
    [Button.name]: Button,
    VanImage
  },
  data() {
    return {
      activeBox: 0,
      chaTime:'',
      userInfo:'',
      tcList:[],
      list: [],
      openid: '',
      showNew: true
    };
  },
  mounted() {
    this.userInfo = this.$store.state.userInfo
    console.log("this.userInfo",this.userInfo)
    if(!this.userInfo){
      this.$router.go(-1)
      return
    }
    this.dateOperator((this.userInfo.create_time))
    this.getMealPage()
    
    // this.userInfo.create_time = utils.formatDateYMDHM(this.userInfo.create_time)
  },
  methods: {
    getMealPage() {
      let params = {
        openid: this.openid
      }
      this.$request.getMealPage(params).then(res=>{
        this.tcList = res.data.data
      })
    },
    clickBuyBtn() {
      this.getBillSave()
    },
    getBillSave() {
      const _this = this
      let params = {
          merchant_id: _this.userInfo.id,
          openid: _this.userInfo.openid,
          name: _this.tcList[_this.activeBox].title,
          avatar: _this.userInfo.avatar || _this.userInfo.door_header,
          nickname: _this.userInfo.nickname || _this.userInfo.name,
          mobile: _this.userInfo.mobile,
          meal_id: _this.tcList[_this.activeBox].id,
          price: _this.tcList[_this.activeBox].price
      }
      console.log('params', params)
      this.$request.getBillSave(params).then(res=>{
          let weixinParams = {
              "appId": res.data.appId,// 公众号appId，由商户传入
              "timeStamp": res.data.timeStamp,// 时间戳
              "nonceStr": res.data.nonceStr,// 随机串     
              "package": res.data.package,
              "signType": res.data.signType,// 微信签名方式
              "paySign": res.data.paySign// 微信签名 
          }
          WeixinJSBridge.invoke('getBrandWCPayRequest', weixinParams, function(res) {
              // Toast(res.err_msg)
              if (res.err_msg == "get_brand_wcpay_request:ok") {
                  Toast('支付成功!')
                  // WeixinJSBridge.call('closeWindow');
              } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
                  Toast('取消支付!')
                  // WeixinJSBridge.call('closeWindow');
              } else {
                  Toast('支付失败!')
              }
              _this.$router.go(-1)
              // WeixinJSBridge.call('closeWindow');
          })
      }).catch(res=>{
          Toast("出错了")
      })
    },
    clickBox(id){
      this.activeBox = id
    },
    dateOperator(createTime) {
      const nowDate = new Date().getTime()
      console.log("nowDate",nowDate)
      console.log("createTime",createTime)
      const cha = new Date(7*24*60*60*1000-(nowDate - new Date(createTime).getTime() + 8*60*60*1000))
      if(cha.getTime()<0 || this.userInfo.vip_status==2) {
        this.showNew = false
      }
      this.chaTime = `${cha.getDate()-1}天${(cha.getHours())<10?'0'+(cha.getHours()):cha.getHours()}:${(cha.getMinutes())<10?'0'+(cha.getMinutes()):cha.getMinutes()}`
      console.log("chaTime",this.chaTime)
    }
  },
};
</script>